<template>
  <div class="form-item">
    <i class="el-icon-remove right-top" @click="onRemove"></i>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'CommonForm',
  props: {
    'instanceId': String
  },
  methods: {
    onRemove () {
      this.$emit('remove', this.instanceId)
    }
  }
}
</script>

<style lang="scss" scoped>
.right-top {
  position: absolute;
  right: -10px;
  top: -10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 999;
}

.form-item {
  position: relative;

  > i {
    display: none;
  }

  &:hover {
    border: 1px dashed #ececec;
    background: #fff8cc;

    > i {
      display: block;
    }
  }
}
</style>
